import React, { useState, useEffect } from 'react';
import TableEditor from 'src/components/TableEditor';
import Actions from 'src/components/Actions';
import { InputNumber, Row, Col } from 'antd';
import Question from 'src/components/Question';
import { STRATEGY_MODE } from 'src/utils/constant';

import { compare } from 'src/utils/compare';

// 组件动作配置
export default function ActionConfig(props) {
  const [value, setValue] = useState(props.value);
  useEffect(() => {
    props.value && props.value.length > 0 && setValue(props.value);
  }, [props.value]);

  function handelChange(value) {
    setValue(value);
    props.onChange && props.onChange(value);
  }

  function handleActionChange(val, record) {
    record.actions = val;
    setValue(JSON.parse(JSON.stringify(value)));
    props.onChange && props.onChange(value);
  }

  // 改变min 区间小值
  function onHandleMinChange(val, record) {
    record.min = val;
    setValue(JSON.parse(JSON.stringify(value)));
    props.onChange && props.onChange(value);
  }

  // 改变 max 区间大值
  function onHandleMaxChange(val, record) {
    record.max = val;
    setValue(JSON.parse(JSON.stringify(value)));
    props.onChange && props.onChange(value);
  }
  const columns = [
    props.type !== STRATEGY_MODE._RULESET
      ? {
          title: '编号',
          dataIndex: 'id',
          key: 'id',
          width: 60,
          render: (text, record, index) => {
            return <>{index + 1}</>;
          },
        }
      : false,
    props.type !== STRATEGY_MODE._RULESET
      ? {
          dataIndex: 'min',
          key: 'min',
          width: 300,
          title:
            props.type === STRATEGY_MODE._SCORE_CARD ? (
              <span className='flex'>
                得分区间
                <Question title='得分区间数值型以左开区间，右闭区间进行定义（左小于右），得分区间不可重叠。' />
              </span>
            ) : (
              <span className='flex'>
                权重区间
                {/* <Question title='权重区间' /> */}
              </span>
            ),
          render: (text, record, index) => {
            return (
              <Row type='flex' align='middle' gutter={10}>
                <Col>
                  <InputNumber
                    value={record.min}
                    onChange={(value) => onHandleMinChange(value, record)}
                    disabled={props.disabled}
                    style={compare(props, index, 'min')}
                  />
                </Col>
                <Col>--</Col>
                <Col>
                  <InputNumber
                    value={record.max}
                    onChange={(value) => onHandleMaxChange(value, record)}
                    disabled={props.disabled}
                    style={compare(props, index, 'max')}
                  />
                </Col>
              </Row>
            );
          },
        }
      : {
          dataIndex: 'action_type',
          key: 'action_type',
          width: 300,
          title: '命中状态',
          render: (text, record, index) => {
            return (
              <>
                {record.action_type === 'condition_true' && '命中'}
                {record.action_type === 'condition_false' && '未命中'}
              </>
            );
          },
        },
    {
      dataIndex: 'actions',
      key: 'actions',

      title: '动作',
      render: (text, record, index) => {
        return (
          <>
            <Actions
              {...props}
              value={record.actions}
              onChange={(value) => handleActionChange(value, record)}
              compareData={(props.compareData && props.compareData[index] && props.compareData[index].actions) || []}
            />
          </>
        );
      },
    },
  ].filter(Boolean);
  return (
    <div style={{ paddingTop: '20px' }}>
      <TableEditor
        {...props}
        columns={columns}
        initItem={{
          actions: [],
        }}
        dataSource={value}
        onChange={handelChange}
        noNeedAdd={props.type !== STRATEGY_MODE._RULESET ? props.disabled : true}
        getButtonGroup={({ removeButton }) => {
          return props.type !== STRATEGY_MODE._RULESET ? [removeButton] : [];
        }}
        isInitOne={props.isInitOne}
      />
    </div>
  );
}
